<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应jQuery焦点图插件DEMO演示</title>

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/jquery.hiSlider.min.css">
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font: 14px/2 'Microsoft YaHei', 'Arial';
	}
	li{
		list-style: none;
	}
	li img{
		display: block;
		margin: 0 auto;
	}
	#wrap{
		width: 80%;
		min-width: 300px;
		margin: 10px auto 80px;
		background: #fefefe;
	}
	.hiSlider{
		overflow: hidden;
		height: 280px;
		width: 500px;
		background: #eee;
	}
	.hiSlider-item{
		float: left;
	}
</style>

</head>
<body>
<div id="wrap">
	<div style="text-align:center;clear:both;">
	<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
	<script src="/follow.js" type="text/javascript"></script>
</div>

	<h2>example1: 默认设置</h2>
	
	<ul class="hiSlider hiSlider1">
		<li data-title="11111" class="hiSlider-item"><a href="http://www.baidu.com"><img src="images/1.jpg" alt="11111"></a></li>
		<li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
		<li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
		<li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
		<li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
	</ul>

	<h2>example2: 弹性布局 + 淡入淡出</h2>
	<ul class="hiSlider hiSlider2">
		<li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
		<li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
		<li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
		<li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
		<li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
	</ul>

	<h2>example3: 支持触摸事件 + 弹性布局 (请在移动端测试)</h2>
	<ul class="hiSlider hiSlider3">
		<li class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
		<li class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
		<li class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
		<li class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
		<li class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
	</ul>

	<h2>example4: 改变方向</h2>
	<ul class="hiSlider hiSlider4">
		<li data-title="11111" class="hiSlider-item"><img src="images/1.jpg" alt="11111"></li>
		<li data-title="22222" class="hiSlider-item"><img src="images/2.jpg" alt="22222"></li>
		<li data-title="33333" class="hiSlider-item"><img src="images/3.jpg" alt="33333"></li>
		<li data-title="44444" class="hiSlider-item"><img src="images/4.jpg" alt="44444"></li>
		<li data-title="55555" class="hiSlider-item"><img src="images/5.jpg" alt="55555"></li>
	</ul>
	<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90-2.js" type="text/javascript"></script>
</div>
</div>

<script src="js/jquery.1.9.1.js"></script>
<script src="js/jquery.hiSlider.min.js"></script>
<script>
	$('.hiSlider1').hiSlider();
	$('.hiSlider2').hiSlider({
		isFlexible: true,
		mode: 'fade',
		isSupportTouch: false,
		isShowTitle: false,
		isShowPage: false,
		titleAttr: function(curIdx){
			return $('img', this).attr('alt');
		}
	});
	$('.hiSlider3').hiSlider({
		isFlexible: true,
		isSupportTouch: true,
		titleAttr: function(curIdx){
			return $('img', this).attr('alt');
		}
	});
	$('.hiSlider4').hiSlider({
		startSlide: 2,
		direction: 'top'
	});
</script>

</body>
</html>